<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": ""
  }
}
</route>

<script lang="ts" setup>
import DrawingBoard from "@/components/DrawingBoard/index.vue";
const props = defineProps({
  editorCtx: {
    type: Object,
  },
});
const formats = ref<any>({});
// const format = (e) => {
const format = (name, value) => {
  if (!name) return;
  // console.log('format', name, value)
  props.editorCtx.format(name, value);
};
const insertImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      props.editorCtx.insertImage({
        src: res.tempFilePaths[0],
        alt: "图像",
        success: function () {},
      });
    },
  });
};
const insertFile = () => {
  uni.chooseFile({
    count: 1,
    success: (res) => {
      // 这里上传后保留一个链接
      // props.editorCtx.insertImage({
      //   src: res.tempFilePaths[0],
      //   alt: "图像",
      //   success: function () {
      //     console.log("insert image success");
      //   },
      // });
    },
  });
};

const insertTable = () => {
  console.log(props.editorCtx);
  props.editorCtx.getContents({
    success: function (e) {
      const str = `<table>
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>`;
    },
  });
};

const removeFormat = () => {
  props.editorCtx.removeFormat();
};
const insertDate = () => {
  const date = new Date();
  const formatDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  props.editorCtx.insertText({
    text: formatDate,
  });
};
const undo = () => {
  props.editorCtx.undo();
};
const redo = () => {
  props.editorCtx.redo();
};
const insertLine = () => {
  props.editorCtx.getContents({
    success: (success) => {
      console.log(success);
    },
  });
};
const insertDivider = () => {
  props.editorCtx.insertDivider({
    success: function () {
      console.log("insert divider success");
    },
  });
};
const clear = () => {
  uni.showModal({
    title: "清空编辑器",
    content: "确定清空编辑器全部内容？",
    success: (res) => {
      if (res.confirm) {
        props.editorCtx.clear({
          success: function (res) {
            console.log("clear success");
          },
        });
      }
    },
  });
};
const showFontStyleBox = ref(false);
const titleList = ref<Array<{ type: string; name: string; text: string; value: string }>>(
  [
    {
      type: "header",
      name: "header",
      text: "标题",
      value: "H1",
    },
    {
      type: "header",
      name: "header",
      text: "副标题",
      value: "H2",
    },
    {
      type: "header",
      name: "header",
      text: "小标题",
      value: "H3",
    },
    {
      type: "header",
      name: "header",
      text: "正文",
      value: "H4",
    },
    // {
    //   type: "comment",
    //   name: "header",
    //   text: "注释",
    //   value: "comment",
    // },
  ]
);
const toolsList = ref<
  Array<{ type: string; name: string; text: string; value?: string; img?: string }>
>([
  {
    type: "img",
    name: "bold",
    text: "加粗",
    img: "i-carbon-text-bold",
  },
  {
    type: "img",
    name: "italic",
    text: "斜体",
    img: "i-carbon-text-italic",
  },
  {
    type: "img",
    name: "underline",
    text: "下划线",
    img: "i-carbon-text-underline",
  },
  {
    type: "img",
    name: "strike",
    text: "删除线",
    img: "i-carbon-text-strikethrough",
  },
  {
    type: "img",
    name: "align",
    value: "left",
    text: "左对齐",
    img: "i-carbon-text-align-left",
  },
  {
    type: "img",
    name: "align",
    value: "center",
    text: "居中",
    img: "i-carbon-text-align-center",
  },
  {
    type: "img",
    name: "align",
    value: "right",
    text: "右对齐",
    img: "i-carbon-text-align-right",
  },
  {
    type: "img",
    name: "align",
    value: "justify",
    text: "左右对齐",
    img: "i-carbon-text-align-justify",
  },
  {
    type: "img",
    name: "fontFamily",
    value: "Pacifico",
    text: "字体",
    img: "i-carbon-string-text",
  },
  {
    type: "text",
    name: "fontSize",
    text: "字号",
    value: "24",
  },
  {
    type: "img",
    name: "color",
    img: "i-carbon-text-color",
    text: "字体颜色",
    value: "#0000ff",
  },
  {
    type: "img",
    name: "backgroundColor",
    img: "i-carbon-text-fill",
    text: "背景色",
    value: "#00ff00",
  },
  {
    type: "img",
    name: "list",
    img: "i-carbon-list-boxes",
    text: "待办",
    value: "check",
  },
  {
    type: "img",
    name: "list",
    img: "i-carbon-list-numbered",
    text: "有序",
    value: "ordered",
  },
  {
    type: "img",
    name: "list",
    img: "i-carbon-list",
    text: "无序",
    value: "bullet",
  },
  // {
  //   type: "undo",
  //   name: "undo",
  //   img: "i-carbon-undo",
  //   text: "撤回",
  //   value: "undo",
  // },
  // {
  //   type: "redo",
  //   name: "redo",
  //   img: "i-carbon-redo",
  //   text: "重做",
  //   value: "redo",
  // },
  {
    type: "img",
    name: "indent",
    img: "i-carbon-text-indent-less",
    text: "-缩进",
    value: "-1",
  },
  {
    type: "img",
    name: "indent",
    img: "i-carbon-text-indent-more",
    text: "缩进",
    value: "+1",
  },
  // {
  //   type: "upload",
  //   name: "upload",
  //   img: "i-carbon-image",
  //   text: "上传",
  //   value: "upload",
  // },
  {
    type: "img",
    name: "script",
    img: "i-carbon-text-subscript",
    text: "下标",
    value: "sub",
  },
  {
    type: "img",
    name: "script",
    img: "i-carbon-text-superscript",
    text: "上标",
    value: "super",
  },
  {
    type: "date",
    name: "backgroundColor",
    img: "i-carbon-time",
    text: "时间",
    value: "date",
  },
]);
const toolsBarItemClick = (item) => {
  const switchFun = {
    text: () => {
      format(item.name, item.value);
    },
    img: () => {
      format(item.name, item.value);
    },
    undo: () => {
      undo();
    },
    redo: () => {
      redo();
    },
    date: () => {
      insertDate();
    },
    upload: () => {
      insertImage();
    },
    uploadFile: () => {
      insertFile();
    },
    header: () => {
      format(item.name, item.value);
      format("color", "#000");
    },
    comment: () => {
      format("header", "H4");
      format("color", "#998");
    },
    draw: () => {
      showBoard.value = true;
      if (drawPathArr.value && drawPathArr.value.length) {
        setTimeout(() => {
          drawingBoard.value.setHistoryPath(drawPathArr.value);
        }, 500);
      }
    },
    table: () => {
      insertTable();
    },
  };
  switchFun[item.type] && switchFun[item.type]();
  showAddBox.value = false;
  showFontStyleBox.value = false;
  // let switchFun = {
  //   // 点击类型
  //   click: () => {
  //     let keys = { previewFun: 1, undoFun: 1, redoFun: 1, clearFun: 1 };
  //     if (keys[item.name]) {
  //       // return item.name] && item.name]();
  //     }
  //     format(item.name, item.value);
  //   },
  //   // 弹窗类型
  //   // popup: () => {
  //   //   if (formats[item.name]) {
  //   //     return format(item.name, "");
  //   //   }
  //   //   colorPicker.open();
  //   // },
  //   // // 选择类型
  //   select: () => {
  //     if (formats[item.name]) {
  //       return format(item.name, "");
  //     }
  //     let keys = item.value.map((item) => item.name);
  //     if (item.name === "margin" || item.name === "padding") {
  //       uni.showActionSheet({
  //         itemList: keys,
  //         success: (resOne) => {
  //           let name = item.value[resOne.tapIndex].value;
  //           setTimeout(() => {
  //             let list = ["0px", "10px", "15px", "20px", "25px", "30px"];
  //             uni.showActionSheet({
  //               itemList: list,
  //               success: (resTwo) => {
  //                 format(name, list[resTwo.tapIndex]);
  //                 // console.log(name,list[resTwo.tapIndex]);
  //               },
  //             });
  //           }, 100);
  //         },
  //         fail: function (res) {
  //           console.log(res.errMsg);
  //         },
  //       });
  //       return;
  //     }
  //     uni.showActionSheet({
  //       itemList: keys,
  //       success: (res) => {
  //         format(item.name, item.value[res.tapIndex].value);
  //       },
  //       fail: function (res) {
  //         console.log(res.errMsg);
  //       },
  //     });
  //   },
  //   // 上传类型
  //   upload: () => {
  //     insertImage();
  //   },
  // };
  // switchFun[item.type] && switchFun[item.type]();
};

const showAddBox = ref(false);

const addList = ref<
  Array<{ type: string; name: string; text: string; value?: string; img?: string }>
>([
  {
    type: "upload",
    name: "upload",
    img: "i-carbon-image",
    text: "上传",
    value: "upload",
  },
  {
    type: "camera",
    name: "camera",
    img: "i-carbon-camera",
    text: "拍摄",
    value: "camera",
  },
  {
    type: "uploadFile",
    name: "upload",
    img: "i-carbon-document",
    text: "文件",
    value: "uploadFile",
  },
  {
    type: "draw",
    name: "draw",
    img: "i-carbon-draw",
    text: "涂鸦",
    value: "draw",
  },
  {
    type: "table",
    name: "table",
    img: "i-carbon-table",
    text: "表格",
    value: "table",
  },
  {
    type: "scan",
    name: "scan",
    img: "i-carbon-scan-alt",
    text: "扫描",
    value: "scan",
  },
]);

const showToolsBox = (show) => {
  switch (show) {
    case "showFontStyleBox":
      showAddBox.value = false;
      showFontStyleBox.value = true;
      break;
    case "showAddBox":
      showFontStyleBox.value = false;
      showAddBox.value = true;
      break;
  }
};
const showBoard = ref(false);

const drawingBoard = ref(null);
const drawPathArr = ref([]);
const drawSave = (e) => {
  drawPathArr.value = e.path;
  props.editorCtx.insertImage({
    src: e.img,
    alt: "图像",
    success: function () {},
  });
};
</script>

<template>
  <view class="bg-[#fdeee3]" :class="showFontStyleBox ? 'h-[60px]' : 'h-[60px]'">
    <!-- @touchend.stop="format" -->
    <view class="flex items-center justify-between h-full px-[12px]">
      <!-- <view class="i-carbon-circle-outline"> </view> -->
      <view
        class="i-carbon-checkmark-outline text-[24px]"
        data-name="list"
        data-value="check"
        @click="
          toolsBarItemClick({
            type: 'img',
            name: 'list',
            text: '',
            img: 'i-carbon-text-bold',
            value: 'check',
          })
        "
      >
      </view>
      <view
        class="i-carbon-text-font text-[24px]"
        @click="showToolsBox('showFontStyleBox')"
      >
      </view>
      <view class="i-carbon-microphone text-[24px]"> </view>
      <view class="i-carbon-add-alt text-[24px]" @click="showToolsBox('showAddBox')">
      </view>
    </view>
    <view
      class="rounded-t-[20px] absolute bg-[#fcfcfc] px-[12px] py-[12px] shadow-bg"
      :class="showFontStyleBox ? 'bottom-0' : 'bottom-[-100%]'"
    >
      <view class="flex justify-between items-center mb-3">
        <text>格式</text>
        <view
          class="iconfont w-[28px] h-[28px] i-carbon-close-outline"
          @click="showFontStyleBox = !showFontStyleBox"
        >
        </view>
      </view>
      <view class="toolbar-title flex flex-wrap w-full justify-between mb-2">
        <view
          class="icon-text flex items-center justify-center"
          v-for="item in titleList"
          :key="item.value"
          @click="toolsBarItemClick(item)"
        >
          <text class="">{{ item.text }}</text>
        </view>
        <!-- <view
          class="icon-text flex items-center justify-center"
          :class="formats.header === 1 ? 'ql-active' : ''"
          data-name="header"
          :data-value="1"
        >
          <text class="">标题</text>
        </view>
        <view
          class="icon-text flex items-center justify-center"
          :class="formats.header === 2 ? 'ql-active' : ''"
          data-name="header"
          :data-value="2"
        >
          <text>副标题</text>
        </view>
        <view
          class="icon-text flex items-center justify-center"
          :class="formats.header === 3 ? 'ql-active' : ''"
          data-name="header"
          :data-value="3"
        >
          <text class="">小标题</text>
        </view>
        <view
          class="icon-text flex items-center justify-center"
          :class="formats.header === 4 ? 'ql-active' : ''"
          data-name="header"
          :data-value="4"
        >
          <text>正文</text>
        </view>
        <view
          class="icon-text flex items-center justify-center"
          :class="formats.header === 5 ? 'ql-active' : ''"
          data-name="header"
          :data-value="5"
        >
          <text>注释</text>
        </view> -->
      </view>
      <view class="toolbar flex flex-wrap gap-x-[1%] gap-y-1 pb-3">
        <view
          v-for="(item, index) in toolsList"
          class="bg-[#f1f1f1] w-[19%] flex justify-center rounded-xl py-1"
        >
          <view
            v-if="item.type === 'img'"
            :class="item.img + ' ' + (formats[item.name] ? 'ql-active' : '')"
            class="iconfont"
            data-name="bold"
            @click="toolsBarItemClick(item)"
          >
          </view>
          <view
            v-else-if="item.type === 'text'"
            :class="formats[item.name] ? 'ql-active' : ''"
            class="icon-text"
            data-name="bold"
            @click="toolsBarItemClick(item)"
          >
            <text>{{ item.value }}</text>
          </view>
          <view
            v-else
            class="iconfont"
            :class="item.img"
            @click="toolsBarItemClick(item)"
          ></view>
          <!-- <view
            v-if="item.type === 'date'"
            :class="item.img"
            @click="toolsBarItemClick(item)"
          ></view>
          <view
            v-if="item.type === 'upload'"
            :class="item.img"
            @click="toolsBarItemClick(item)"
          ></view> -->
        </view>
      </view>
      <view class="toolbar flex flex-wrap" v-if="false">
        <view
          :class="formats.bold ? 'ql-active' : ''"
          class="iconfont i-carbon-text-bold"
          data-name="bold"
        >
        </view>
        <view
          :class="formats.italic ? 'ql-active' : ''"
          class="iconfont i-carbon-text-italic"
          data-name="italic"
        >
        </view>
        <view
          :class="formats.underline ? 'ql-active' : ''"
          class="iconfont i-carbon-text-underline"
          data-name="underline"
        ></view>
        <view
          :class="formats.strike ? 'ql-active' : ''"
          class="iconfont i-carbon-text-strikethrough"
          data-name="strike"
        ></view>
        <!-- #ifndef MP-BAIDU -->
        <view
          :class="formats.align === 'left' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-align-left"
          data-name="align"
          data-value="left"
        ></view>
        <!-- #endif -->
        <view
          :class="formats.align === 'center' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-align-center"
          data-name="align"
          data-value="center"
        ></view>
        <view
          :class="formats.align === 'right' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-align-right"
          data-name="align"
          data-value="right"
        ></view>
        <view
          :class="formats.align === 'justify' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-align-justify"
          data-name="align"
          data-value="justify"
        ></view>

        <!-- #ifndef MP-BAIDU -->
        <view
          :class="formats.fontFamily ? 'ql-active' : ''"
          class="iconfont i-carbon-string-text"
          data-name="fontFamily"
          data-value="Pacifico"
        ></view>
        <view
          class="icon-text flex items-center justify-center w-[12px]"
          data-name="fontSize"
          data-value="24px"
        >
          <text>24</text>
        </view>
        <!-- #endif -->
        <view
          :class="formats.color === '#0000ff' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-color"
          data-name="color"
          data-value="#0000ff"
        ></view>
        <view
          :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-fill"
          data-name="backgroundColor"
          data-value="#00ff00"
        ></view>
        <view class="iconfont i-carbon-time" @tap="insertDate"></view>
        <view
          class="iconfont i-carbon-list-boxes"
          data-name="list"
          data-value="check"
        ></view>
        <view
          :class="formats.list === 'ordered' ? 'ql-active' : ''"
          class="iconfont i-carbon-list-numbered"
          data-name="list"
          data-value="ordered"
        ></view>
        <view
          :class="formats.list === 'bullet' ? 'ql-active' : ''"
          class="iconfont i-carbon-list"
          data-name="list"
          data-value="bullet"
        ></view>

        <view class="iconfont i-carbon-undo" @tap="undo"></view>
        <view class="iconfont i-carbon-redo" @tap="redo"></view>

        <view
          class="iconfont i-carbon-text-indent-less"
          data-name="indent"
          data-value="-1"
        ></view>
        <view
          class="iconfont i-carbon-text-indent-more"
          data-name="indent"
          data-value="+1"
        ></view>
        <view class="iconfont i-carbon-image" @tap="insertImage"></view>
        <view
          :class="formats.script === 'sub' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-subscript"
          data-name="script"
          data-value="sub"
        ></view>
        <view
          :class="formats.script === 'super' ? 'ql-active' : ''"
          class="iconfont i-carbon-text-superscript"
          data-name="script"
          data-value="super"
        ></view>
      </view>
    </view>
    <view
      class="rounded-t-[20px] w-full absolute box-border bg-[#fcfcfc] px-[12px] py-[12px] shadow-bg"
      :class="showAddBox ? 'bottom-0' : 'bottom-[-100%]'"
    >
      <view class="flex justify-between items-center mb-3">
        <text>添加</text>
        <view
          class="iconfont w-[28px] h-[28px] i-carbon-close-outline"
          @click="showAddBox = !showAddBox"
        >
        </view>
      </view>
      <view class="add-toolbar flex flex-wrap gap-x-[1%] gap-y-[8px]">
        <view v-for="(item, index) in addList" class="w-[24%]">
          <view @click="toolsBarItemClick(item)" class="flex flex-col items-center">
            <view
              v-if="item.type === 'img'"
              :class="item.img + ' ' + (formats[item.name] ? 'ql-active' : '')"
              class="iconfont"
              data-name="bold"
            >
            </view>
            <view
              v-else-if="item.type === 'text'"
              :class="formats[item.name] ? 'ql-active' : ''"
              class="iconfont"
              data-name="bold"
            >
              <text>{{ item.value }}</text>
            </view>
            <view v-else class="iconfont" :class="item.img"></view>
            <text class="text-size-sm text-[#939393]">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <DrawingBoard ref="drawingBoard" v-model="showBoard" @save="drawSave" />
</template>

<style lang="scss" scoped>
//
.toolbar-title {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  .icon-text {
    cursor: pointer;
    padding: 5px;
    text {
      white-space: nowrap;
      font-size: 20px;
    }
  }
}
.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  .iconfont {
    display: inline-block;
    padding: 8px 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  .icon-text {
    display: inline-block;
    padding: 8px 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    text {
      position: absolute;
      font-size: 20px;
      font-weight: bold;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.add-toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  .iconfont {
    display: inline-block;
    padding: 8px 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
  .icon-text {
    display: inline-block;
    padding: 8px 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    position: relative;
    text {
      position: absolute;
      font-size: 20px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.ql-active {
  color: #06c;
}
.shadow-bg {
  -moz-box-shadow: 0px -6px 12px #e9e9e9;
  -webkit-box-shadow: 0px -6px 12px #e9e9e9;
  box-shadow: 0px -6px 12px #e9e9e9;
  transition: 0.5s;
}
</style>
